@import "./mixins/mixin.scss";

@mixin button-variant($color, $background-color, $border-color) {
  color: $color;
  background: $background-color;
  border-color: $border-color;
}

// 'large' | 'medium' | 'small' | 'mini'

@include b(button) {
  --MuiButton-SpaceYSize-Mini: 0;
  --MuiButton-SpaceXSize-Mini: 10px;
  --MuiButton-SpaceYSize-Small: 3px;
  --MuiButton-SpaceXSize-Small: 15px;
  --MuiButton-SpaceYSize-Medium: var(--space-size-mini);
  --MuiButton-SpaceXSize-Medium: var(--space-size-large);

  --MuiButton-SpaceYSize-Large: 6.4px;
  --MuiButton-SpaceXSize-Large: 15px;
  --MuiButton-Height-Mini: 24px;
  --MuiButton-Height-Small: 28px;
  --MuiButton-Height-Medium: 32px;
  --MuiButton-Height-Large: 40px;

  --MuiButton-BorderRadiusSize-Medium: var(--border-radius-size-mini);
  --MuiButton-BorderRadiusSize-Large: var(--border-radius-size-medium);
  height: var(--MuiButton-Height-Medium);
  display: inline-block;
  cursor: pointer;
  outline: none;
  border-radius: var(--MuiButton-BorderRadiusSize-Medium);
  user-select: none;
  border: 1px solid transparent;
  line-height: 1.5715;
  vertical-align: middle;
  border-color: #d9d9d9;
  padding: var(--MuiButton-SpaceYSize-Medium) var(--MuiButton-SpaceXSize-Medium);
  font-size: var(--text-size-small);
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  touch-action: manipulation;
  text-align: center;
  &:before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: 1;
    display: none;
    background: #fff;
    border-radius: inherit;
    opacity: 0.35;
    transition: opacity 0.2s;
    content: "";
    pointer-events: none;
  }
  & [class*="#{$namespace}-icon-"] {
    // 处理icon 和文字间距
    & + span {
      margin-left: 5px;
    }
  }

  @include when(round) {
    border-radius: var(--border-radius-size-round);
  }
  @include when(loading) {
    pointer-events: none;
  }
  @include m(primary) {
    //渲染不同类型的button
    @include button-variant(
      var(--color-white),
      var(--color-primary),
      var(--color-primary)
    );
    @include when(ghost) {
      @include button-variant(
        var(--color-primary),
        transparent,
        var(--color-primary)
      );
    }
  }
  @include m(success) {
    @include button-variant(
      var(--color-white),
      var(--color-success),
      var(--color-success)
    );
    @include when(ghost) {
      @include button-variant(
        var(--color-success),
        transparent,
        var(--color-success)
      );
    }
  }
  @include m(warning) {
    @include button-variant(
      var(--color-white),
      var(--color-warning),
      var(--color-warning)
    );
    @include when(ghost) {
      @include button-variant(
        var(--color-warning),
        transparent,
        var(--color-warning)
      );
    }
  }
  @include m(danger) {
    @include button-variant(
      var(--color-white),
      var(--color-danger),
      var(--color-danger)
    );
    @include when(ghost) {
      @include button-variant(
        var(--color-danger),
        transparent,
        var(--color-danger)
      );
    }
  }
  @include m(info) {
    @include button-variant(
      var(--color-white),
      var(--color-info),
      var(--color-info)
    );
    @include when(ghost) {
      @include button-variant(
        var(--color-info),
        transparent,
        var(--color-info)
      );
    }
  }
  @include m(default) {
    @include button-variant(
      var(--text-color-button),
      var(--color-white),
      var(--border-color-smoke-2)
    );
    @include when(ghost) {
      @include button-variant(
        var(--text-color-button),
        transparent,
        var(--border-color-smoke-2)
      );
    }
  }

  @include m(mini) {
    height: var(--MuiButton-Height-Mini);
    font-size: var(--text-size-mini);
    padding: var(--MuiButton-SpaceYSize-Mini) var(--MuiButton-SpaceXSize-Mini);
  }
  @include m(small) {
    height: var(--MuiButton-Height-Small);
    font-size: var(--text-size-small);
    padding: var(--MuiButton-SpaceYSize-Small) var(--MuiButton-SpaceXSize-Small);
  }

  @include m(large) {
    height: var(--MuiButton-Height-Large);
    font-size: var(--text-size-small);
    border-radius: var(--border-radius-size-medium);
    padding: var(--MuiButton-SpaceYSize-Large) var(--MuiButton-SpaceXSize-Large);
  }
  @include when(disabled) {
    // 针对不同类型处理
    &,
    &:hover,
    &:focus {
      cursor: not-allowed;
    }
    @include button-variant(
      var(--text-color-disabled),
      var(--color-disabled),
      var(--border-color-smoke-2)
    );
  }

  @include m(text) {
    @include button-variant(var(--text-color-button), transparent, transparent);
    @include when(disabled) {
      @include button-variant(
        var(--text-color-disabled),
        transparent,
        transparent
      );
    }
    @include when(ghost) {
      @include button-variant(var(--color-primary), transparent, transparent);
    }
  }
  @include m(link) {
    @include button-variant(var(--color-primary), transparent, transparent);
    @include when(disabled) {
      @include button-variant(
        var(--text-color-disabled),
        transparent,
        transparent
      );
    }
    @include when(ghost) {
      @include button-variant(var(--color-primary), transparent, transparent);
    }
  }
  @include when(block) {
    display: block;
    width: 100%;
  }
  @include when(gradient) {
    border:0;
    color: var(--color-white);
    @include when(loading) {
       
        &:before {
            left:0;
            right: 0;
            top: 0;
            bottom:0;
          display: block;
        }
      }
  }
  @include when(loading) {
    &,
    &:hover,
    &:focus {
      cursor: not-allowed;
    }
    border-color: transparent;
    &:before {
      display: block;
    }
  }
}
